<script setup lang="ts">

  const props = withDefaults(defineProps<{ loading?: boolean }>(), {
    loading: false,
  });
</script>

<template>
  <el-skeleton class="w-full px-4 sm:px-8" :loading="loading" animated>
    <template #template>
      <div class="py-3">
        <div
          style="
            display: flex;
            align-items: center;
            justify-items: space-between;
            margin-top: 16px;
            height: 16px;
          "
        >
          <el-skeleton-item variant="h3" class="mr-[20%] sm:mr-[30%] !h-6" />
          <el-skeleton-item variant="h3" class="!h-6" />
        </div>
      </div>
      <el-skeleton-item variant="image" class="!h-52 sm:!h-80" />
    </template>
    <template #default>
      <slot></slot>
    </template>
  </el-skeleton>
</template>

<style lang="scss"></style>
